<script setup lang='ts'>
import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import { getChannelAPI } from '@/api/channel';
import { onMounted, ref } from 'vue';
import type { ChannelItem } from '@/types';

onMounted(() => {
  getChannel()
})

const channelList = ref<ChannelItem[]>([])
// 激活Id
const activeId = ref(0)
const getChannel = async () => {
  const result = await getChannelAPI()
  channelList.value = result.channels  // 赋值列表
  activeId.value = result.channels[0].id  // 把第一个频道的id作为激活的选项
}

</script>



<template>
  <!-- 频道 -->
  <ChannelNav :active-id="activeId" :channels="channelList" @update-active-id="activeId = $event"></ChannelNav>
  <!-- 列表 -->
  <ArticleList :active-id="activeId" ></ArticleList>
</template>

<style scoped></style>